<?php
$id = isset($_GET['id']) && !empty($_GET['id']) ? filter_var($_GET['id'], FILTER_SANITIZE_STRING) : NULL;
?>
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7 scroll"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie10 lt-ie9 lt-ie8 scroll"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie10 lt-ie9 scroll"> <![endif]-->
<!--[if IE 9]>         <html class="no-js lt-ie10 scroll"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js no-ie scroll"> <!--<![endif]-->
    <head profile="http://gmpg.org/xfn/11">
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="author" content="Zicca Calzados : Identidad Femenina" />
        <meta name="keywords" content="calzado, cuero, femenino, mujer, beleza, glamour, estilo, moda, zapatos, botas, sandalias, tacos, suecos, peru, trujillo" />
        <meta name="description" content="Zicca : Identidad Femenina" />

        <title>Zicca : Colección detalle</title>

        <link href='http://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css' />
        <link href="css/vendor/normalize.min.css" rel="stylesheet" />
        <link href="css/vendor/helpers.css" rel="stylesheet" />
        <link href="css/vendor/reset.css" rel="stylesheet" />
        <link href="css/common.css" rel="stylesheet" />
        <link href="css/custom.css" rel="stylesheet" />
        <link href="css/media.css" rel="stylesheet" />
        <!-- <link rel="apple-touch-icon" href="img/apple-touch-icon.png"> -->
        <link rel="shortcut icon" href="img/favicon.gif" />
        <script src="js/vendor/modernizr-2.6.1.min.js"></script>
    </head>
    <body>

        <!--                <header id="header">
                            <section>
                                <nav class="menu first">
                                    <ul>
                                        <li id="logo"><a href="./"></a></li>
                                        <li class="selected"><a href="javascript:;"><strong>COLECCIÓN</strong></a>
                                            <ul class="main-submenu">
                                                <li class="selected"><a href="javascript:;"><span>OTOÑO/INVIERNO 2012-13</span></a>
                                                    <div>
                                                        <ul class="submenu">
                                                            <li>CALZADO
                                                                <ul class="items">
                                                                    <li><a href="/collection.html">Botas</a></li>
                                                                    <li><a href="/collection.html">Mocasíns</a></li>
                                                                    <li><a href="/collection.html">Balerinas</a></li>
                                                                    <li><a href="/collection.html">Zapatos</a></li>
                                                                    <li><a href="/collection.html">Ojotas</a></li>
                                                                    <li><a href="/collection.html">Sandalias</a></li>
                                                                    <li><a href="/collection.html">Suecos</a></li>
                                                                </ul>
                                                            </li>
                                                            <li>ACCESORIOS
                                                                <ul class="items">
                                                                    <li><a href="javascript:;">Piccola Pelletteria</a></li>
                                                                    <li><a href="javascript:;">Cinture</a></li>
                                                                    <li><a href="javascript:;">Foulard</a></li>
                                                                    <li><a href="javascript:;">Fashion Jewellery</a></li>
                                                                </ul>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </li>
                                                <li><a href="javascript:;"><span>PRIMAVERA/VERANO 2013</span></a>
                                                    <div>
                                                        <ul class="submenu">
                                                            <li>CALZADO
                                                                <ul class="items">
                                                                    <li><a href="javascript:;">Collection</a></li>
                                                                    <li><a href="javascript:;">Foulard</a></li>
                                                                </ul>
                                                            </li>
                                                            <li>PERFUMES
                                                                <ul class="items">
                                                                    <li><a href="javascript:;">Fashion Styles</a></li>
                                                                    <li><a href="javascript:;">Signature</a></li>
                                                                </ul>
                                                            </li>
                                                            <li>ACCESORIOS
                                                                <ul class="items">
                                                                    <li><a href="javascript:;">Piccola Pelletteria</a></li>
                                                                    <li><a href="javascript:;">Cinture</a></li>
                                                                    <li><a href="javascript:;">Piccoli Accessori</a></li>
                                                                    <li><a href="javascript:;">Cravatte e Sciarpe</a></li>
                                                                </ul>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                        <li><a href="/campaing.html"><strong>CAMPAÑA</strong></a></li>
                                        <li><a href="/stores.html"><strong>TIENDAS</strong></a></li>
                                        <li><a href="/brand.html"><strong>LA MARCA</strong></a></li>
                                        <li><a href="/contact.html"><strong>CONTÁCTENOS</strong></a></li>
                                        <li class="last">
                                            <form id="search" enctype="application/x-www-form-urlencoded" method="get">
                                                <div class="follow">
                                                    <em>¡Redes social por aquí!</em> <img src="css/img/arrow-right.png" /><a href="javascript:;" class="social-icons fb" title="Zicca en Facebook"></a><a href="javascript:;" class="social-icons tw" title="Zicca en Twitter"></a> <input name="q" type="text" value="" placeholder="Buscar" class="text search" />
                                                </div>
                                            </form>
                                        </li>
                                    </ul>
                                </nav>
                            </section>
                        </header>-->

        <div id="container" class="fullscreen">

            <section id="gallery" class="gallery landscape">
                <a class="direction-navs prev" href="javascript:;"></a>
                <a class="direction-navs next" href="javascript:;"></a>

                <aside>
                    <img src="/css/img/logo-black.png" />
                    <span class="counter">COLECCIÓN 8/58</span>
                    <h3>DAMA OTOÑO/INVIERNO 2012-13 CALZADO</h3>

                    <div class="share">
                        COMPARTIR
                        <ul>
                            <li class="fb"><a href="javascript:;">Facebook</a></li>
                            <li class="tw"><a href="javascript:;">Twitter</a></li>
                            <li class="p"><a href="javascript:;">Pinterest</a></li>
                            <li class="email"><a href="javascript:;">Email</a></li>
                        </ul>
                    </div>

                    <a href="/collection.html">RETORNAR A LA GALERÍA</a>
                </aside>

                <div class="landscape">
                    <?php if (empty($id)): ?>
                        <img class="landscape" id="landscape" src="img/8I4154_E3K_VC9.jpg" />
                    <?php else: ?>
                        <img class="landscape" id="landscape" src="img/collection/<?php echo $id; ?>.jpg" />
                    <?php endif; ?>
                </div>
            </section>





            <!--            <div id="panel_left">
                            <a id="panel_handle">&laquo;</a>
            
                            <div id="panel_left_content">
                                <h2>COLLECCIÓN 2012/2013</h2>
                                <ul>
                                    <li><a href="javascript:;">Mocasíns</a></li>
                                    <li><a href="javascript:;">Balerinas</a></li>
                                    <li><a href="javascript:;">Zapatos</a></li>
                                    <li class="selected"><a href="javascript:;">Ojotas</a></li>
                                    <li><a href="javascript:;">Sandalias</a></li>
                                    <li><a href="javascript:;">Suecos</a></li>
                                    <li><a href="javascript:;">Botas</a></li>
                                    <li><a href="javascript:;">Zapatillas</a></li>
                                </ul>
                            </div>
            
                        </div>-->

            <!--            <div id="panel_right" class="product_detail">
                            <nav id="path">
                                <ul>
                                    <li><a href="javascript:;">INICIO</a></li>
                                    <li><a href="javascript:;">COLECCIÓN</a></li>
                                    <li><a href="javascript:;">ZAPATOS</a></li>
                                    <li class="selected">NOMBRE DEL ZAPATO</li>
                                </ul>
                            </nav>
            
                            <section id="gallery">
                                <a id="preview-close" href="javascript:;"></a>
                                <img id="preview" src="img/detail4.jpg" />
                                <div class="gallery_wrap">
                                    <img src="img/detail2.jpg" class="selected" />
                                    <img src="img/detail.jpg" />
                                    <img src="img/detail3.jpg" />
                                    <img src="img/detail4.jpg" />
                                </div>
                            </section>
            
                            <aside id="detail">
                                <div id="desc">
                                    <h1>NOMBRE ZAPATO</h1>
                                    <strong>Ref: 424-26519-EVE</strong>
                                    <em>S./ 40.0</em>
                                </div>
            
                                <div id="colors" class="info">
                                    <em>Color(es) :</em>
            
                                    <ul class="colors" class="info">
                                        <li class="salmon"></li>
                                        <li class="black"></li>
                                        <li class="purple"></li>
                                        <li class="magenta"></li>
                                        <li class="brown selected"></li>
                                    </ul>
                                </div>
            
                                <div id="sizes" class="info">
                                    <em>Talla(s) disponible(s) :</em>
            
                                    <ul class="sizes" class="info">
                                        <li>34</li>
                                        <li>35</li>
                                        <li>36</li>
                                        <li>37</li>
                                        <li>38</li>
                                        <li>39</li>
                                        <li>40</li>
                                        <li>41</li>
                                        <li>42</li>
                                    </ul>
                                </div>
            
                                <div class="line"></div>
            
                                <div id="composition" class="info">
                                    <em>Composición :</em>
            
                                    <div class="list">
                                        <strong class="item">EXTERIOR : </strong>
                                        <p>
                                            Cuero Natural<br/>
                                            Cuero Sintético<br/>
                                        </p>
                                    </div>
            
                                    <div class="list">
                                        <strong class="item">INTERIOR : </strong>
                                        <p>
                                            Forrado de algodón
                                        </p>
                                    </div>
                                </div>
            
                                <ul class="instructions">
                                    <li class="icon01 tipz" title="No se puede planchar 1::Lorem ipsum dolor sit amet, consectetur adipiscing elit. "></li>
                                    <li class="icon02 tipz" title="No se puede planchar 2::Lorem ipsum dolor sit amet, consectetur adipiscing elit. "></li>
                                    <li class="icon03 tipz" title="No se puede planchar 3::Lorem ipsum dolor sit amet, consectetur adipiscing elit. "></li>
                                    <li class="icon04 tipz" title="No se puede planchar 4::Lorem ipsum dolor sit amet, consectetur adipiscing elit. "></li>
                                    <li class="icon05 tipz" title="No se puede planchar 5::Lorem ipsum dolor sit amet, consectetur adipiscing elit. "></li>
                                </ul>
            
                                <div id="share" class="info">
                                    <em>Compartir :</em>
            
                                    <ul class="share">
                                        <li class="fb"><a href="javascript:;">Facebook</a></li>
                                        <li class="tw"><a href="javascript:;">Twitter</a></li>
                                        <li class="p"><a href="javascript:;">Pinterest</a></li>
                                        <li class="email"><a href="javascript:;">Email</a></li>
                                    </ul>
                                </div>
            
                                <div class="line"></div>
            
                                <div id="viewed" class="info">
                                    <em>Modelos vistos :</em>
                                    <ul class="viewed">
                                        <li><a href="javascript:;"><img src="img/thumb-01.png"></a></li>
                                        <li><a href="javascript:;"><img src="img/thumb-02.png"></a></li>
                                        <li><a href="javascript:;"><img src="img/thumb-02.png"></a></li>
                                    </ul>
                                </div>
            
                                <div class="line"></div>
            
                            </aside>
                        </div>-->

        </div>

        <!--                <footer id="footer">
                            <nav class="menu first">
                                <ul>
                                    <li><a href="javascript:;">Colección</a></li>
                                    <li><a href="javascript:;">Campaña</a></li>
                                    <li><a href="javascript:;">Tiendas</a></li>
                                    <li><a href="javascript:;">La Marca</a></li>
                                    <li><a href="javascript:;">Contáctenos</a></li>
                                    <li id="copy">&copy; 2012 Zicca. Todos los derechos reservados</li>
                                </ul>
                            </nav>
                
                            <nav class="last">
                
                            </nav>
                        </footer>-->

        <!--<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>-->
        <script type="text/javascript" src="js/vendor/mootools-1.4.5.min.js"></script>
        <!--<script type="text/javascript" src="js/vendor/mootools-more-1.4.0.1.min.js"></script>-->
        <!--<script type="text/javascript" src="js/vendor/uSize-1.0.min.js"></script>-->
        <!--<script type="text/javascript" src="js/vendor/Scrollable.js"></script>-->
        <!--<script type="text/javascript" src="js/vendor/Zoomer.js"></script>-->
        <script type="text/javascript" src="js/main.js"></script>
        <script type="text/javascript" src="js/collection_detail.js"></script>
        <script type="text/javascript">
            document.addEvent('domready', function(){
                new Co_Detail();
            });
        </script>
    </body>
</html>